<template>
	<view class="order_detail_box">
		<!-- 		<view class="logistics_box" @click="handNavTo()">
			<image src="../../../static/img/car.png" class="icon" mode=""></image>
			<view class="logistics_title">
				<view class="title">
					【安阳市】快件离开【潮汕中心】已发往【裸线···】已发往【裸线···】已发往【裸线···】
				</view>
				<view class="time">
					2021-08-10 12：20
				</view>
			</view>
		</view> -->
		<!-- selfMention自提点id代表是自提订单 -->
		<view class="" style="width: 100%;" v-if="details.selfMention">
			<u-cell-item :title="userName" :arrow="false"></u-cell-item>
			<u-cell-item @click='handleNavigation' :title="selfMentionName" :label='details.selfMentionAddress'
				:arrow="true"></u-cell-item>
			<u-gap height="14" bg-color="#ECECEC"></u-gap>
		</view>

		<GoodsItem @handleComment='handleComment' @handleRefund='handleRefund' @handShop='handShop' @delOrderInfo='delOrderInfo' @handleReceiving='handleReceiving'
			@handlePay='handlePay' @handlecancel='handlecancel' :item='details'
			@handDetailsNavTo='handNavToDetails(details.goodsId)' @turnShop='turnShop(item)'>
		</GoodsItem>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="explain">
			<view class="exp_title">
				使用说明
			</view>
			<view class="exp_summary">
				服饰类商品如出现洗涤，或吊牌已摘，或显著穿戴痕迹等影响二次
				销售情形，且无质量问题的，不支持七天无理由退换。
			</view>
		</view>
		<view class="explain" v-if="details.orderRemarks">
			<view class="exp_title">
				订单备注信息
			</view>
			<view class="exp_summary">
				{{details.orderRemarks}}
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="msg_box">
			<OrderMsg title='订单编号' :value='details.orderCode' :isColpy="true"></OrderMsg>
			<OrderMsg title='支付方式' :value='payType'></OrderMsg>
			<!-- <OrderMsg title='商品快照' value='核对交易细节时，可作为判断依据'></OrderMsg> -->
			<OrderMsg v-if="details.expressName" title='物流公司' :value='details.expressName'></OrderMsg>
			<OrderMsg v-if="details.expressNo" title='快递单号' :value='details.expressNo' :isColpy="true"></OrderMsg>
			<OrderMsg title='发货时间' :value='$u.timeFormat(details.deliverTime , "yyyy年mm月dd日 hh时MM分")'
				v-if="details.deliverTime"></OrderMsg>
			<OrderMsg title='下单时间' :value='$u.timeFormat(details.createTime , "yyyy年mm月dd日 hh时MM分")'></OrderMsg>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<ZYTitle title='精选'></ZYTitle>
		<view class="item_row">
			<GoodsItemRow @handNavToDetails='handNavToDetails(item.id)' v-for="(item,index) in list" :key='index'
				:item="item">
			</GoodsItemRow>
		</view>
	</view>
</template>

<script>
	import GoodsItem from '../components/OrderGoodsItem-2.vue'
	import OrderMsg from '../components/OrderMsg.vue'
	import GoodsItemRow from '@/components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import ZYTitle from '@/components/ZY-title/ZY-title.vue'
	import initData from '@/mixin/initData.js'
	export default {
		mixins: [initData],
		components: {
			GoodsItemRow,
			ZYTitle,
			GoodsItem,
			OrderMsg
		},
		computed: {
			payType() {
				console.log(this.details,'支付方式')
				switch (this.details.payType) {
					case 1:
						return '微信'
						break;
					case 2:
						return '支付宝'
						break;
					case 3:
						return '余额支付'
						break;
					default:
						break;
				}
			},
			selfMentionName() {
				return `自提点:${this.details.selfMentionName}`
			},
			userName() {
				return `提货人:${this.userInfo.nickName}`
			},
		},
		data() {
			return {
				id: '',
				details: {},
				userInfo: {}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.miXinInit()
			this.init()
			const userInfo = this.cache.getCache('userInfo')
			this.userInfo = userInfo
		},
		methods: {
			handleRefund(item) {
				uni.navigateTo({
					url: '/pages/refund/refund?order=' + JSON.stringify(this.details)
				})
			},
			handleComment(item) {
				uni.navigateTo({
					url: '/pages/handleComment/handleComment?order=' + JSON.stringify(this.details)
				})
			},
			handleNavigation() {
				const id = this.details.selfMention
				this.$u.api.appBusinessInfo({
					id
				}).then(res => {
					const {
						lng,
						lat
					} = res
					uni.openLocation({
						latitude: parseFloat(lat), //------》传入的经纬度必须是浮点数， 不能传入字符串，否则地图打不开
						longitude: parseFloat(lng),
						scale: 18
					})
				})
			},
			handShop(item) {
				const {
					businessId
				} = item
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?id=' + businessId
				})
			},
			delOrderInfo(item) {

				const that = this
				uni.showModal({
					title: '提示',
					content: '确认删除吗?',
					success(res) {
						if (res.confirm) {
							that.$u.api.delOrderInfoById({
								id: item.id
							}).then(res => {
								uni.showToast({
									title: '确认收货成功',

									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/order/order'
								})
							})
						}

					}
				})
			},
			handleReceiving(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认您的订单已完成',
					success(res) {
						if (res.confirm) {
							that.$u.api.confirmReceipt({
								id: item.id
							}).then(res => {
								uni.showToast({
									title: '确认收货成功',

									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/order/order'
								})
							})
						}

					}
				})
			},
			handlecancel(row) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认取消吗?',


					success() {
						that.$u.api.cancellationOrder({
							id: row.id
						}).then(res => {
							if (res.confirm) {
								uni.showToast({
									title: '取消成功',
									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/order/order'
								})
							}

						})
					}
				})
			},
			handlePay(item) {

				uni.navigateTo({
					url: '/pages/payPages/payPages?order=' + JSON.stringify(item)
				})

			},
			init() {
				this.$u.api.getOrderInfoById({
					id: this.id
				}).then(res => {
					console.log(res, '订单详情')
					this.details = res
				})
			},
			// 请求前的参数处理
			beforeInit() {
				this.apiUrl = "carouselMap/getGoodGoodsList";
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				};

				this.params = {
					...params
				};
			},
			handNavToDetails(id) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + id,

				})
			},
			handNavTo() {
				uni.navigateTo({
					url: '/pages/logistics/logistics'
				})
			},
			turnShop(item) {
				uni.showModal({
					title: '提示',
					content: '确认转给商家吗?',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/selfPoint/selfPoint?id=' + item.id
							})
						}
			
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail_box {
		.item_row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.msg_box {
			padding: 24rpx;
		}


		.explain {
			display: flex;
			flex-direction: column;
			padding: 24rpx;

			.exp_title {

				font-size: 28rpx;
				color: #000000;
			}

			.exp_summary {
				margin-top: 12rpx;
				color: #828282;
				font-size: 24rpx;

			}
		}

		.logistics_box {
			display: flex;
			align-items: center;
			padding: 24rpx;

			.icon {
				width: 60rpx;
				height: 46rpx;
				margin-right: 13rpx;
			}

			.logistics_title {
				.time {
					color: #A8A8A8;
					font-size: 24rpx;
				}

				.title {
					@include ellipsisMultiline(1);
					color: $u-type-primary;
					font-size: 28rpx;
					margin-bottom: 4rpx;

				}

			}

		}
	}
</style>
